<template>
  <a-space align="center" style="margin-bottom: 16px; width:100%; justify-content:center;">
    <a-form :model="formSearchParams" layout="inline" @submit="doSearch">
      <a-form-item field="resultName" label="结果名称">
        <a-input
          v-model="formSearchParams.resultName"
          placeholder="请输入结果名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="resultDesc" label="结果描述">
        <a-input
          v-model="formSearchParams.resultDesc"
          placeholder="请输入结果描述"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="appId" label="测评活动 id">
        <a-input
          v-model="formSearchParams.appId"
          placeholder="请输入测评活动 id"
          allow-clear
        />
      </a-form-item>
<!--      <a-form-item field="userId" label="用户 id">-->
<!--        <a-input-->
<!--          v-model="formSearchParams.userId"-->
<!--          placeholder="请输入用户 id"-->
<!--          allow-clear-->
<!--        />-->
<!--      </a-form-item>-->
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit">搜索</a-button>
          <!-- 列设置 -->
          <a-popover trigger="click" title="选择要展示的列">
            <template #content>
              <a-checkbox-group v-model="selectedKeys" :options="columnOptions" />
            </template>
            <a-button>列设置</a-button>
          </a-popover>
        </a-space>
      </a-form-item>
    </a-form>
  </a-space>

  <a-table
    :columns="visibleColumns"
    :data="dataList"
    :pagination="{
      showTotal: true,
      pageSize: searchParams.pageSize,
      current: searchParams.current,
      total
    }"
    @page-change="onPageChange"
  >
    <template #resultPicture="{ record }">
      <a-image width="64" :src="record.resultPicture" />
    </template>
    <template #createTime="{ record }">
      {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #updateTime="{ record }">
      {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
    </template>
    <template #optional="{ record }">
      <a-space>
        <a-button status="danger" @click="doDelete(record)">删除</a-button>
      </a-space>
    </template>
  </a-table>
</template>

<script setup lang="ts">
import { ref, watchEffect, computed } from "vue";
import { deleteScoringResultUsingPost, listScoringResultByPageUsingPost } from "@/api/scoringResultController";
import API from "@/api";
import message from "@arco-design/web-vue/es/message";
import { dayjs } from "@arco-design/web-vue/es/_utils/date";
import type { CheckboxOption } from "@arco-design/web-vue";

// —— 列配置相关 ——
interface ColDef { key: string; title: string; dataIndex?: string; slotName?: string }
const allColumns: ColDef[] = [
  { key: "id",             title: "id",             dataIndex: "id" },
  { key: "resultName",     title: "结果名称",       dataIndex: "resultName" },
  { key: "resultDesc",     title: "结果描述",       dataIndex: "resultDesc" },
  { key: "resultPicture",  title: "图片",           dataIndex: "resultPicture", slotName: "resultPicture" },
  { key: "resultProp",     title: "结果属性",       dataIndex: "resultProp" },
  { key: "resultScoreRange", title: "评分范围",     dataIndex: "resultScoreRange" },
  { key: "appId",          title: "测评活动 id",    dataIndex: "appId" },
  { key: "userId",         title: "用户 id",        dataIndex: "userId" },
  { key: "createTime",     title: "创建时间",       dataIndex: "createTime", slotName: "createTime" },
  { key: "updateTime",     title: "更新时间",       dataIndex: "updateTime", slotName: "updateTime" },
  { key: "optional",       title: "操作",           slotName: "optional" },
];
// 默认展示列
const defaultKeys = ["resultName","resultDesc","resultPicture","optional"];
const selectedKeys = ref<string[]>([...defaultKeys]);
// 复选框选项
const columnOptions = computed<CheckboxOption[]>(() =>
  allColumns.map(col => ({ label: col.title, value: col.key }))
);
// 根据 selectedKeys 过滤列
const visibleColumns = computed(() =>
  allColumns
    .filter(col => selectedKeys.value.includes(col.key))
    .map(col => {
      const c: any = { title: col.title, key: col.key };
      if (col.dataIndex) c.dataIndex = col.dataIndex;
      if (col.slotName) c.slotName = col.slotName;
      return c;
    })
);

// —— 数据加载 & 搜索 & 分页 ——
const formSearchParams = ref<Partial<API.ScoringResultQueryRequest>>({});
const initSearchParams = { current: 1, pageSize: 10 };
const searchParams = ref<Partial<API.ScoringResultQueryRequest>>({ ...initSearchParams });
const dataList = ref<API.ScoringResult[]>([]);
const total = ref(0);

async function loadData() {
  const res = await listScoringResultByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取数据失败：" + res.data.message);
  }
}

function doSearch() {
  searchParams.value = { ...initSearchParams, ...formSearchParams.value };
}

function onPageChange(page: number) {
  searchParams.value = { ...searchParams.value, current: page };
}

async function doDelete(record: API.ScoringResult) {
  if (!record.id) return;
  const res = await deleteScoringResultUsingPost({ id: record.id });
  if (res.data.code === 0) loadData();
  else message.error("删除失败：" + res.data.message);
}

watchEffect(loadData);
</script>
